<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

    // function tick() {
    //   const element = (
    //     <div>
    //       <h1>Hello, world!</h1>
    //       <h2>It is {new Date().toLocaleTimeString()}.</h2>
    //     </div>
    //   );
    //   ReactDOM.render(
    //     element,
    //     document.getElementById('root')
    //   );
    // }
    // setInterval(tick, 1000);

    // 封装时钟
    // function Clock(props) {
    //   return (
    //     <div>
    //       <h1>hello, world</h1>
    //       <h2>It is {props.date.toLocaleTimeString()}</h2>
    //     </div>
    //   );
    // }
    // function tick() {
    //   ReactDOM.render(
    //     <Clock date={new Date()} />,
    //     document.getElementById('root')
    //   );
    // }
    // setInterval(tick, 1000);

    // 但是上面的方法更新时间需要每次都渲染时钟组件, 理想的情况下我们应该刷新时间 , 而不是去渲染组件
    // 第一步
    // class Clock extends React.Component {
    //   render() {
    //     return (
    //       <div>
    //         <h1>Hello, world!</h1>
    //         <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
    //       </div>
    //     );
    //   }
    // }
    // function tick() {
    //   ReactDOM.render(
    //     <Clock date={new Date()} />,
    //     document.getElementById('root')
    //   );
    // }
    // setInterval(tick, 1000);

    //第二步
    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }
      // 第三步, 加入生命周期的方法
      componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
      componentWillUnmount() {
        clearInterval(this.timerID);
      }
      tick() {
        this.setState({
          date: new Date()
        });
      }

      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }
    ReactDOM.render(
      <Clock />,
      document.getElementById('root')
    );


    // 注意
    // 不要直接更新状态, 使用 this.setState({comment: 'Hello'});, 构造函数是唯一能够初始化 this.state 的地方。
    // 状态更新可能是异步的


    </script>
  </body>
</html>
